/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, useTheme,} from "customize-easy-ui-component";
import { ReportViewProps, } from "../../common/base";
import {末尾链接, 注意事项, 落款单位地址,} from "../../common/rarelyVary";
import {检验结论报告,} from "./repView";
import {内部检验报告附页} from "../viewMeta";
import {ReportFirstPageHeadNmbbm, 注意事项Boil, 首页设备概况Bl} from "../rarelyVary";
import {useRepMenuDirItems} from "../../hook/useMainRepUrlOr";
import {ViewAppendixPic} from "../ViewAppendixPic";

//页面哈希路由方式
const JumpTags=[{name:'设备概况',ha:'Survey'},{name:'检验结论',ha:'Conclusion'},
    {name:'受压元部件检查',ha:'MetacomponM'},{name:'附页及附图',ha:'AppendixPic'}];
export const ReportView: React.FunctionComponent<ReportViewProps> = ({
    repId,   source: orc,  verId,rep,
}) => {
    const theme= useTheme();
    const [rootMenu]=useRepMenuDirItems(JumpTags, [],`/reportView/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}`);
    //手机菜单可安排的：一层7位置+二层9位置。报告最多安排16个菜单。 加了, {time: Date()});：URL强制刷新！才能真正跳转成功到位置
  return (
    <React.Fragment>
        {rootMenu}
        <div css={{
            "@media not print": {
                marginTop: '1rem',
                marginBottom: '1rem'
            }
        }}>
          <div css={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              "@media print": {
                    height:'100vh',
                    pageBreakInside: 'avoid',
              }
          }}>
                {ReportFirstPageHeadNmbbm({theme, rep, mbbm: 'FJB/TM-1007-1-0-2022'})}
                <div>
                    <Text variant="h3" css={{
                        textAlign: 'center',
                        "@media (min-width:690px),print and (min-width:538px)": {
                            fontSize: theme.fontSizes[6],
                        }
                    }}>
                      工业锅炉内部检验报告
                    </Text>
                    <br css={{"@media not print": {display: 'none'}}}/>
                    <Text variant="h5" css={{
                        textAlign: 'center',
                    }}> （ FJB/GC-1001-0-2021 ）
                    </Text>
                </div>
                <div css={{
                    "@media print": {
                        // minHeight: '-webkit-fill-available',
                    }
                }}>
                    {首页设备概况Bl({theme, orc, rep})}
                </div>
                <div css={{
                    textAlign: 'center',
                    "@media print": {
                        // pageBreakAfter: 'always',
                        pageBreakInside: 'avoid'
                    }
                }}>
                    {落款单位地址}
                </div>
           </div>       {/*第一页纸张的,前面必定新断开打印一页的,才能确保100vh盛满一张纸张的底部区域,保证内容不会大于100vh前提下的稳妥做法*/}

            {注意事项Boil({
                rep,
                comply: '书为依据《锅炉安全技术规程》(TSG 11-2020)制定，适用于工业锅炉内部检验报告的结论报告，检验结论仅代表该设备在检验时的安全状况'
            })}

            {检验结论报告({theme, orc, rep})}

            <Text id="MetacomponM" variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
                // "@media print": {
                //     pageBreakBefore: 'always', marginTop: 'unset',
                // },
            }}>工业锅炉内部检验报告（附页）</Text>
            {内部检验报告附页({theme, orc, rep})}

            <ViewAppendixPic orc={orc} rep={rep} title={'工业锅炉内部检验报告（附页2）'}/>
        </div>

        {末尾链接({template: rep?.modeltype, verId, repId: repId || ''})}
    </React.Fragment>
  );
}

